<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>增加学生信息</title>
    <style>
        main {
            width: 300px;
            margin: 0 auto;
            border: 1px solid gray;
            padding-left: 30px;
        }
    </style>
</head>

<body>
    <main>
        <h1>添加学生信息</h1>
        <form action="" method="post">
            <p>班级: <input type="text" name="clazz"></p>
            <p>姓名: <input type="text" name="name"></p>
            <p>性别:
                <input type="radio" name="gender" value="男">男
                <input type="radio" name="gender" value="女">女
            </p>
            <p>年龄: <input type="text" name="age"></p>
            <p>爱好:
                <input type="checkbox" name="hobby" value="吃饭">吃饭
                <input type="checkbox" name="hobby" value="睡觉">睡觉
                <input type="checkbox" name="hobby" value="学习">学习
            </p>
            <p>电话: <input type="text" name="tel"></p>
            <p>地址: <select name="address">
                    <option value="焦作" >焦作</option>
                    <option value="安阳" >安阳</option>
                    <option value="周口" >周口</option>
                    <option value="信阳" >信阳</option>
                </select></p>
            <p>备注: <textarea name="remark" cols="30" rows="10"></textarea></p>
            <p>入学时间: <input type="date" id="date" name="date"></p>
            <p>
                <input type="submit" value="提交">
            </p>
        </form>
    </main>
    <script src="./js/utils.js"></script>
    <script>
        var form = document.querySelector('form');
        form.onsubmit = function (e) {
            e.preventDefault();//阻止表单跳转

            //js文件里封装的函数 返回将表单数据序列化为 k=v&k=v
            var data = serializeKeyValue(this);

            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4) {
                    if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
                        //点击提交按钮后,跳转回首页
                        window.location.href = "01-首页.html";
                    }
                }
            }
            var url = 'http://localhost:3008/api/student/addStudent';
            xhr.open('POST', url);
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xhr.send(data);
        }
    </script>
</body>

</html>